<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <AvueForm :value="form" :option="option" />
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import AvueForm from './components/AvueForm.vue'

export default {
  name: 'App',
  components: {
    AvueForm
  },
  data() {
        return {
            form: {
                dynamic: [
                    {
                        input: 1,
                        select: 1,
                    },
                    {
                        input: 2,
                        select: 2,
                    },
                ],
            },
            option: {
                column: [
                    {
                        label: "子表单",
                        prop: "dynamic",
                        type: "dynamic",
                        span: 24,
                        children: {
                          align: "center",
                          headerAlign: "center",
                          rowAdd: (done) => {
                              this.$message.success("新增回调");
                              done({
                                  input: "默认值",
                              });
                          },
                          rowDel: (row, done) => {
                              this.$message.success("删除回调" + JSON.stringify(row));
                              done();
                          },
                          column: [
                              {
                                  width: 200,
                                  label: "输入框",
                                  prop: "input",
                              },
                              {
                                  label: "选择框",
                                  prop: "select",
                                  type: "input",
                              },
                          ],
                        },
                    },
                ],
            },
        };
    }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
